<template>
	<view class="m-recharge">
		<mPop ref="mPop" :popHeigh="reChargePopHeight" maskBgColor="rgba(0,0,0,.5)">
			<view class="reCharge-box flex-column-start-center">
				<view class="reCharge-title flex-row-center-center">充值</view>
				<view class="reCharge-tip flex-row-start-center">
					<text>余额：</text>
					<image class="reCharge-tip-icon"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
						mode="aspectFill"></image><text>{{totalPoint}}</text>
				</view>
				<view class="reCharge-list flex-row-start-start">
					<view class="reCharge-item flex-column-center-center"
						:class="{'act-reCharge-item':index==actReChargeIndex}" v-for="(item,index) in reChareDataList"
						:key="index" @click="handleReChargeItemClick(item,index)">
						<view class="item-virtual-price flex-row-center-center">
							<view class="virtual-price-icon">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
									mode="aspectFill"></image>
							</view>
							{{item.rechargeNum}}
							<view class="item-bonus flex-row-center-center" v-if="item.giftNum">
								<text class="item-bonus-add">+</text>
								<text>{{item.giftNum}}</text>
							</view>

						</view>
						<view class="item-price flex-row-center-center">{{item.realPrice}}元</view>

					</view>
				</view>
				<view class="reCharge-ways-box">

				</view>
				<view class="reCharge-button flex-row-center-center">
					<view class="reCharge-button-content flex-row-center-center" @click="handleToReCharge">立即充值
						{{reChargeMoney}}元
					</view>
				</view>
				<view class="reCharge-protocol flex-row-center-center" @click="handleAgreeReCharge">
					<view class="reCharge-protocol-btn flex-row-center-center"
						:class="{'reCharge-protocol-agree':isAgreeProtocol}">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/34869045371e460aa6c60c9dd5cc5806.png"
							mode="aspectFill" v-show="isAgreeProtocol"></image>
					</view>
					已阅读并同意<text class="reCharge-protocol-jump" @click.stop>充值协议</text>和<text
						class="reCharge-protocol-jump" @click.stop>充值安全提示</text>
				</view>

			</view>
		</mPop>
	</view>
</template>

<script>
	// 充值
	import * as API_Trade from "@/api/trade";
	import {
		WXPaySdk
	} from "@/js_sdk/lili-pay/wx-pay.js";
	import {
		throttle
	} from "@/utils/tools.js"
	import {
		getReChargeList,
		getMyInfo,
	} from "@/api/game.js"
	import mPop from "@/components/m-pop/index.vue"
	export default {
		porps: {
			gameId: {
				type: [Number, String], //之后直接传入即可
				default: ""
			},
		},
		components: {
			mPop
		},
		watch: {
			reChareDataList: {
				handler(newVal, oldVal) {
					if (newVal && newVal.length) {
						this.reChargeMoney = newVal[0].realPrice
						this.actReCharge = newVal[0]
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				// 总点数
				totalPoint: 0,
				// 充值弹窗相关
				actReCharge: null,
				isAgreeProtocol: false,
				actReChargeIndex: 0,
				reChargeClickIndex: -1,
				reChargeMoney: null,
				reChargePopHeight: 670,
				reChareDataList: [],
				// 
			}
		},
		created() {
			this.handleGetReChargeList()
		},
		methods: {
			open() {
				this.handleGetMyInfo()
				this.$refs.mPop.open()
			},
			close() {
				this.$refs.mPop.close()
			},
			handleGetReChargeList() {
				getReChargeList({
					gameId: this.gameId
				}).then(res => {
					this.reChareDataList = res.data.result
				})
			},
			handleGetMyInfo() {
				let gameId = this.gameId
				getMyInfo({
					gameId
				}).then(res => {
					let result = res.data.result
					this.totalPoint = result.point

					// console.log("获取到的用户信息是", result);
				})
			},
			// 充值
			createTradeFun(item) {
				// 防抖
				throttle(() => {
					//  创建订单
					let client;
					// #ifdef H5
					client = "H5";
					// #endif
					// #ifdef MP-WEIXIN 
					client = "WECHAT_MP";
					// #endif
					// #ifdef APP-PLUS
					client = "APP";
					// #endif

					let submit = {
						client,
						way: 'VIRTUAL', //立即购买
						remark: [],
						parentOrderSn: "",
						goodsId: item.id //商品ID
					};
					/**
					 * 创建订单
					 */
					API_Trade.createTrade(submit).then((res) => {
						if (res.data.success) {
							uni.showToast({
								title: "创建订单成功!",
								duration: 2000,
								icon: "none",
							});
							this.pay(res.data.result.sn)
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none",
							});
						}
					});
				}, this, 3000);
			},
			/**
			 * 微信小程序中直接支付
			 */
			async pay(sn) {
				WXPaySdk({
					sn: sn,
					price: 1,
				}).then(res => {
					console.log("成功");
				}).catch(err => {
					console.log("失败");
				})

			},
			handleAgreeReCharge() {
				this.isAgreeProtocol = !this.isAgreeProtocol
			},
			handleReChargeItemClick(item, index) {
				this.actReChargeIndex = index
				this.actReCharge = item
				this.reChargeMoney = item.realPrice

			},
			handleToReCharge() {
				this.reChargeClickIndex = -2
				setTimeout(() => {
					this.reChargeClickIndex = -1
				}, 100)
				// 走充值逻辑
				if (this.actReCharge) {
					this.createTradeFun({
						id: this.actReCharge.id
					})
				}



			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-recharge {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 999;
		pointer-events: none;

		.reCharge-box {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			box-sizing: border-box;

			.reCharge-title {
				width: 100%;
				font-size: 32rpx;
				line-height: 36rpx;
				color: #343530;
				font-weight: 700;
				margin-top: 20rpx;
			}

			.reCharge-tip {
				width: 750rpx;
				padding: 0rpx 20rpx;
				color: #98989a;
				font-size: 24rpx;
				margin-top: 20rpx;

				.reCharge-tip-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}
			}

			.reCharge-list {
				width: 750rpx;
				padding: 0rpx 20rpx;
				margin-top: 30rpx;
				flex-wrap: wrap;

				.reCharge-item {
					position: relative;
					width: 230rpx;
					height: 140rpx;
					background-color: rgba(248, 248, 248, 1);
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					border-radius: 10rpx;
					border: 2rpx solid transparent;

					&:nth-child(3n) {
						margin-right: 0rpx;
					}

					.item-virtual-price {
						font-size: 30rpx;
						line-height: 40rpx;
						font-weight: 700;
						color: #343530;
						width: 100%;
						height: 40rpx;

						.virtual-price-icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 6rpx;
							vertical-align: middle;
						}

						.item-bonus {
							// color: #ffbb17;
							color: #9366eb;
							vertical-align: middle;

							.item-bonus-add {
								font-size: 24rpx;
								line-height: 24rpx;
								margin: 0rpx 4rpx;
								display: inline-block;
								vertical-align: middle;
							}

						}
					}

					.item-price {
						width: 100%;
						font-size: 24rpx;
						font-weight: 700;
						color: #98989a;
					}

					// .reCharge-border {
					// 	position: absolute;
					// 	left: 0rpx;
					// 	top: 0rpx;
					// 	width: 100%;
					// 	height: 100%;
					// 	z-index: 9;
					// 	border: 4rpx solid #9366eb;
					// 	border-radius: 10rpx;
					// }
				}

				.act-reCharge-item {
					border-color: #9366eb;
				}

			}

			.reCharge-ways-box {
				width: 100%;
				height: 50rpx;
			}

			.reCharge-button {
				width: 100%;
				padding: 0rpx 20rpx;

				.reCharge-button-content {
					width: 100%;
					height: 80rpx;
					border-radius: 10rpx;
					color: #fff;
					background-color: #9366eb;
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
					margin-top: 20rpx;
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: 700;
				}

			}

			.reCharge-protocol {
				width: 100%;
				font-size: 22rpx;
				line-height: 24rpx;
				color: #98989a;
				margin-top: 20rpx;

				.reCharge-protocol-jump {
					margin: 0rpx 6rpx;
					color: #9366eb;
				}

				.reCharge-protocol-btn {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 1rpx solid #98989a;
					margin-right: 6rpx;
				}

				.reCharge-protocol-agree {
					border-color: transparent;
					background-color: #9366eb;
				}
			}

		}
	}
</style>